<template>
  <div class="block">
    <el-card class="box-card">
      <div class="radio">
        <el-radio-group v-model="reverse">
          <el-radio :label="true">正序</el-radio>
          <el-radio :label="false">倒序</el-radio>
        </el-radio-group>
        <span class="search">
          <el-input
            size="small"
            clearable
            placeholder="请输入关键字"
            prefix-icon="el-icon-search"
            v-model="searchParam"
            @keyup.enter.native="toSearch"
          ></el-input>
          <el-button @click="toSearch" size="small" type="success" icon="el-icon-search" circle></el-button>
        </span>
      </div>

      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(item, index) in noticeList"
          :key="index"
          :color="customColor"
          :timestamp="item.createTime"
        >
          <el-link type="success" @click="toNoticeDetails(item.id)">{{item.title}}</el-link>
        </el-timeline-item>
      </el-timeline>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reverse: false,
      noticeList: [
        { id: 1, title: "内容", createTime: "2018-04-15" },
        { id: 2, title: "通过审核", createTime: "2018-04-13" },
        { id: 3, title: "创建成功", createTime: "2018-04-11" }
      ],
      currentPage: 1,
      pageSize: 5,
      total: 10,
      customColor: "#0bbd87",
      searchParam: ""
    };
  },
  methods: {
    getNoticeByPage() {
      this.$http
        .get(
          `/notice/noAuthorize/queryPage/${this.currentPage}/${this.pageSize}`
        )
        .then(resp => {
          let { data, code, msg } = resp.data;
          if (code == 1) {
            this.total = data.total;
            this.noticeList = data.noticeList;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },

    handleCurrentChange(newPage) {
      this.$http
        .get(`/notice/noAuthorize/queryPage/${newPage}/${this.pageSize}`)
        .then(resp => {
          let { data, code, msg } = resp.data;
          if (code == 1) {
            this.total = data.total;
            this.noticeList = data.noticeList;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },
    handleSizeChange(size) {
      this.$http
        .get(`/notice/noAuthorize/queryPage/${this.currentPage}/${size}`)
        .then(resp => {
          let { data, code, msg } = resp.data;
          if (code == 1) {
            this.total = data.total;
            this.noticeList = data.noticeList;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    },
    toNoticeDetails(id) {
      this.$router.push("noticeDetails/?noticeId=" + id);
    },
    toSearch() {
      this.$http
        .get("/notice/noAuthorize/queryByCondition", {
          params: {
            key: this.searchParam
          }
        })
        .then(resp => {
          let { data, code, msg } = resp.data;
          if (code == 1) {
            this.total = data.count;
            this.noticeList = data.noticeList;
          } else {
            this.$message.info(msg);
          }
        })
        .catch(resp => {});
    }
  },
  created() {
    this.getNoticeByPage();
  },
  watch: {}
};
</script>


<style scoped lang='less'>
.el-radio-group {
  margin-top: 20px;
  margin-bottom: 20px;
  width: 200px;
  .el-radio {
    margin-top: 10px;
  }
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 960px;
  margin-top: 20px;
}
.el-radio-group {
  margin-top: 20px;
}

.search {
  margin-top: 23px;
  float: right;
  .el-input {
    margin-right: 15px;
    width: 200px;
  }
}
.el-card {
  border-radius: 30px;
}
.el-link--success {
  font-size: 18px;
}
</style>